<template>
	<div class="page" data-name="realtime">
		<div class="navbar">
			<div class="navbar-inner sliding">
				<!-- <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">Back</span>
          </a>
        </div> -->
				<div class="title">实时监控</div>
			</div>
		</div>
		<div class="page-content ptr-content" @ptr:refresh="reload">
			<!-- <div class="block-title">温湿度</div> -->
			<div class="ptr-preloader">
				<div class="preloader"></div>
				<div class="ptr-arrow"></div>
			</div>
			<div class="list media-list">
				<ul>
					{{#each fLastData}}
					<li>
						<a href="/realtime_detail/{{meterid}}/{{metercode}}/{{metername}}/" class="item-link item-content">
							<div class="item-media">
								<img src="http://121.42.24.64/Public/images/1.png" width="80" />
							</div>
							<div class="item-inner">
								<div class="item-title-row">
									<div class="item-title">{{metername}}</div>
								</div>
								<div class="item-subtitle"><span class="badge color-blue">{{readdate}}</span></div>
								<div class="item-text">
									<span class="badge color-orange">{{temp}}</span> {{#if humi}}<span class="badge color-green">{{humi}}</span>{{/if}}
								</div>
							</div>
						</a>
					</li>
					{{/each}}
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	setInterval(function() {
		var self = this;
		var $ = self.$$;
		//console.info(self);
		//console.info($);

		app.request({
			async: true,
			url: URL_HEADER + 'loadTempHumiDevice',
			dataType: 'json',
			timeout: timeout,
			success: function(data, status, xhr) {
				var array = [];
				data.forEach(function(element) {
					//console.info(element);
					var temp = '';
					var humi = '';
					var readdate = '';
					if(element.data.length === 0) {} else if(element.data.length === 1) {
						readdate = element.data[0].readdate;
						temp = element.data[0].value + "℃";
					} else if(element.data.length === 2) {
						readdate = element.data[0].readdate;
						temp = element.data[0].value + "℃";
						humi = element.data[1].value + "%RH";
					}

					array.push({
						meterid: element.rid,
						metercode: element.metercode,
						metername: element.metername,
						readdate: readdate,
						temp: temp,
						humi: humi
					});
				});

				var linkHTML = '';
				for(var i = 0; i < array.length; i++) {
					linkHTML += '<li>' +
						' <a href="/realtime_detail/' + array[i].meterid + '/' + array[i].metercode + '/' + array[i].metername + '/" class="item-link item-content">' +
						'   <div class="item-media">' +
						'    <img src="http://121.42.24.64/Public/images/1.png" width="80" />' +
						'   </div>' +
						'   <div class="item-inner">' +
						'    <div class="item-title-row">' +
						'      <div class="item-title">' + array[i].metername + '</div>' +
						'    </div>' +
						'    <div class="item-subtitle"><span class="badge color-blue">' + array[i].readdate + '</span></div>' +
						'    <div class="item-text">' +
						'			<span class="badge color-orange">' + array[i].temp + '</span>' +
						((array[i].humi) ? '			<span class="badge color-green">' + array[i].humi + '</span>' : '') +
						'    </div>' +
						'  </div>' +
						' </a>' +
						'</li>';
				}

				//console.info($$('#view-realtime').find(".list ul"));
				//$$('#view-history').find(".list ul").html(linkHTML);
				$$('#view-realtime').find(".list ul").html(linkHTML);
			},
			error: function(xhr, status) {}
		});
	}, inteval);

	return {
		/*data: function () {
		  return {
		    fLastData: [],
		  };
		},*/
		methods: {
			reload: function(e, done) {
				var self = this;
				var $ = self.$$;

				app.request({
					async: true,
					url: URL_HEADER + 'loadTempHumiDevice',
					dataType: 'json',
					timeout: timeout,
					success: function(data, status, xhr) {
						var array = [];
						data.forEach(function(element) {
							//console.info(element);
							var temp = '';
							var humi = '';
							var readdate = '';
							if(element.data.length === 0) {} else if(element.data.length === 1) {
								readdate = element.data[0].readdate;
								temp = element.data[0].value + "℃";
							} else if(element.data.length === 2) {
								readdate = element.data[0].readdate;
								temp = element.data[0].value + "℃";
								humi = element.data[1].value + "%RH";
							}

							array.push({
								meterid: element.rid,
								metercode: element.metercode,
								metername: element.metername,
								readdate: readdate,
								temp: temp,
								humi: humi
							});
						});

						var linkHTML = '';
						for(var i = 0; i < array.length; i++) {
							linkHTML += '<li>' +
								' <a href="/realtime_detail/' + array[i].meterid + '/' + array[i].metercode + '/' + array[i].metername + '/" class="item-link item-content">' +
								'   <div class="item-media">' +
								'    <img src="http://121.42.24.64/Public/images/1.png" width="80" />' +
								'   </div>' +
								'   <div class="item-inner">' +
								'    <div class="item-title-row">' +
								'      <div class="item-title">' + array[i].metername + '</div>' +
								'    </div>' +
								'    <div class="item-subtitle"><span class="badge color-blue">' + array[i].readdate + '</span></div>' +
								'    <div class="item-text">' +
								'			<span class="badge color-orange">' + array[i].temp + '</span>' +
								((array[i].humi) ? '			<span class="badge color-green">' + array[i].humi + '</span>' : '') +
								'    </div>' +
								'  </div>' +
								' </a>' +
								'</li>';
						}
						//console.info($(self.$el).find('.list ul'));
						$(self.$el).find('.list ul').html(linkHTML);

						done();
					},
					error: function(xhr, status) {
						//出错
						done();
					}
				});

			}
		}
	};
</script>